<template>
    <div class="person">
        <!-- <h2>我是Person组件</h2> -->

        <h2>姓名： {{ name }}</h2>
        <h2>年龄： {{ age }}</h2>
        <!-- <h2>电话： {{ phone }}</h2> -->
        <button @click="changeName"> 修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showPhone">查看联系方式</button>

        <br/>
        <div> 测试： {{ a }}  </div>
        <div> 年龄： {{ b }}  </div>
        <div> 我的名字： {{ c }}  </div>

    </div>

</template>

<script lang="ts">
import { ref } from 'vue'


export default {
    name: 'Person',
    beforeCreate() {
        console.log('beforeCreate .....')
    },
    // setup 函数是vue3中新增的一个函数 ,执行时机：在beforeCreate之后，created之前
    // 作用：用来编写组件的逻辑代码（数据、方法）
    // setup函数 在 beforeCreate 之前就执行了。。。
    /**
     * setup()：这是 Composition API 的起点，最先执行。
        beforeCreate：紧接着 setup 执行（如果定义了该钩子）。
        created：组件实例创建完成后执行。
     * 
     * 
     *  */ 

    /*
        data 和 setup 可以共存  ,这两种方式可以共存，但是不建议这样使用。

        data 中 可以读取到 setup 中 return 出来的数据吗？  data 中可以读取到 setup中的数据  

        setup 中 可以读取到 data 中的数据吗？  setup 中 不可以读取到 data中的数据
        */ 
    // 注意：setup函数中没有this
    setup() {
        console.log('setup this:  ',this) //setup中的this是undefined，Vue3在弱化this了

        const name = ref('张三')
        const age = ref(18)
        const phone = ref('19012334560')
        // 不能读取data 里面的数据
        // let myVar =  c 

        function changeName() {
            name.value = '李四'
        }

        function changeAge() {
            age.value += 1
        }

        function showPhone() {
            alert(phone.value)
        }
        
        // 返回值 ，将数据，方法交出去，模板中才可以使用
        return {
            name,
            age,
            phone,
            changeName,
            changeAge,
            showPhone
        }


        // setup的返回值也可以是一个渲染函数(可以将返回值渲染到页面上去，模板都展示不了了)
        // return function() {
        //     return 'aaa-哈哈'
        // }
        // return ()=> 'aaa-哈哈'
    },


    data() {

        return {
            a: '张三',
            b:this.age, // 这里的this是undefined
            c: 'frank'
    
        }
    }
}

</script>

<style scoped>
.person {
    background-color: rgb(114, 172, 201);
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin-right: 10px;
}
</style>
